<template>
  <div>
    <el-row>
      <div class="border">
        <el-col :span="4">
          <el-card>
            <img
              src="https://s3.amazonaws.com/superlink-demo/construction/laipac/laipac-s-911bl.png"
              style="float: left; height: 70px; width: 70px; margin-top: 10px"
            />
            <div class="assn-device-tag">设备</div>
            <div class="assn-device-title">设备名称</div>
            <div class="assn-device-value1">描述：111121123132213</div>
            <div></div>
          </el-card>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-card>
            <img
              src="https://s3.amazonaws.com/superlink-demo/construction/construction.jpg"
              style="float: left; height: 70px; width: 70px; margin-top: 10px"
            />
            <div class="assn-device-tag">用户</div>
            <div class="assn-device-title">用户名称</div>
            <div class="assn-device-value1">描述：111121123132213</div>
            <div></div>
          </el-card>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-card>
            <img
              src="https://s3.amazonaws.com/superlink-demo/construction/misc/iphone6.jpg"
              style="float: left; height: 70px; width: 70px; margin-top: 10px"
            />
            <div class="assn-device-tag">站点</div>
            <div class="assn-device-title">站点名称</div>
            <div class="assn-device-value1">描述：111121123132213</div>
            <div></div>
          </el-card>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-card>
            <img
              src="https://s3.amazonaws.com/superlink-demo/people/martin.jpg"
              style="float: left; height: 70px; width: 70px; margin-top: 10px"
            />
            <div class="assn-device-tag">网关</div>
            <div class="assn-device-title">网关名称</div>
            <div class="assn-device-value1">描述：111121123132213</div>
            <div></div>
          </el-card>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-card>
            <div class="text1">分配：</div>
            <div class="text2">发布：</div>
            <div class="text3">状态：</div>
          </el-card>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.el-card {
  height: 90px;
}
.border {
  margin-left: 15px;
  background-color: rgb(245, 255, 245);
  border-width: 5px 1px 1px;
  border-style: solid;
  border-color: rgb(0, 119, 0) rgb(153, 204, 153) rgb(153, 204, 153);
  border-image: initial;
}

.assn-device-tag {
  position: absolute;
  top: 6px;
  /* left: 17px; */
  background-color: rgb(58, 135, 173);
  color: rgb(240, 240, 240);
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
}
.assn-device-title {
  float: left;
  margin-top: 15px;
  margin-left: 3px;
  font-size: 16px;
  color: rgb(51, 51, 51);
  font-weight: 700;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assn-device-value1 {
  float: left;
  margin-top: 15px;
  margin-left: 3px;
  font-size: 12px;
  color: rgb(51, 51, 51);
  white-space: nowrap;
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text1 {
  margin-top: 10px;
  margin-left: 10px;
  font-weight: 600;
}
.text2 {
  margin-top: 10px;
  margin-left: 10px;
  font-weight: 600;
}
.text3 {
  margin-top: 10px;
  margin-left: 10px;
  font-weight: 600;
}
</style>>